<template>
  <div>
    <a href="">百度</a>
    <xqz_scss />
    <!-- <xqz_less /> -->

    <!-- <WgButton block type="success" disabled>加入购物车</WgButton> -->
    <!-- <WgButton>default</WgButton> -->
    <!-- <WgButton type="default">default</WgButton> -->
    <!-- <WgButton type="success" @click="login">登录</WgButton> -->
    <!-- <WgButton type="danger" style="color:green;background-color: brown;">删除</WgButton> -->



    <!-- <TabBar> -->
    <!-- <template #header>头部</template> -->
    <!-- 插槽作用域：父组件接收插槽内部回传的数据 -->
    <!-- <template #footer="slotProps">底部-{{ slotProps.a }}-{{ slotProps.info.username }}</template> -->
    <!-- </TabBar> -->




    <!-- 替换插槽内容只能用双标签 -->
    <!-- <NavBar>登录</NavBar>
    <NavBar>
      <template #left>
        <a href="">
          &lt;返回-{{ msg }}</a>
      </template>

<template #default>
        购物车
      </template>

<template #right>
        按钮
      </template>
</NavBar>
<NavBar>我的个人中心-{{ msg }}</NavBar> -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import NavBar from './components/NavBar.vue';
import TabBar from './components/TabBar.vue';
import WgButton from './components/WgButton.vue';

import xqz_less from './components/xqz_less.vue';
import xqz_scss from './components/xqz_scss.vue';
const msg = ref('父父父')

const login = (event) => {
  alert('登录成功')
}

</script>

<style>
* {
  padding: 0;
  margin: 0;
}

:root {
  --btn-success-color: skyblue;
}

a {
  color: var(--btn-success-color);
}
</style>